<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        var { Scene, GaodeMap } = L7;
        const scene = new Scene({
            id: 'map',
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'normal', // 样式URL
                center: [114.30, 30.50],
                pitch: 50,
                zoom: 14,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            logoVisible: false
        });
        /*
        1、侧重地理数据的展示
        2、map是作为场景Scene的一个属性
        Scene场景  使用地图来实现地理数据的可视化
         */
        /* L7
        阿里
        高德 --阿里  国内
        国际 mapbox
         */
        const data = [
            {
                name: "武汉市",
                lng: 114.30,
                lat: 30.50,
                height: 300
            }, {
                name: "长沙市",
                lng: 114.31,
                lat: 30.50,
                height: 400
            }, {
                name: "东苑",
                lng: 114.31,
                lat: 30.505,
                height: 400
            },
            {
                name: "西苑",
                lng: 114.31,
                lat: 30.506,
                height: 400
            }
        ]
        scene.on("loaded", () => {
            const pointLayer = new L7.PointLayer({})
                .source(data, {
                    parser: {
                        type: 'json',
                        x: 'lng',
                        y: 'lat'
                    }
                })
            /* 点图层-动画 */
            pointLayer
                .animate(true)
                .active(true)
                .shape('name', [
                    'cylinder',
                    'triangleColumn',
                    'hexagonColumn',
                    'squareColumn'
                ])
                .size('height', h => [6, h / 5])
                .color('name', ['#739DFF', '#61FCBF', '#FFDE74', '#FF896F'])
            scene.addLayer(pointLayer);

        })
    </script>
</body>

</html>